<template>
	<view class="address">
		<view class="cuIcon-close" @click="closeModal"></view>
		<view class="address-title" >
			<view @click="cutFn(0)" :class="iscut?'select-address':'item-address'">所有游客</view>
			<view @click="cutFn(1)" :class="!iscut?'select-address':'item-address'">新增游客</view>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="loadList" style="height: 80vh;padding: 30rpx;padding-bottom: 50rpx;" v-if="iscut">
			<label class="ad_card" v-for="(item,index) in data" @click="choosePeople(item)" :key="index">
				<view style="font-size: 40rpx;display: flex;align-items: center;margin-right: 24rpx;">
					<uni-icons :color="item.checked? '#EF5233':'#979797'"
						:type="item.checked?'checkbox-filled':'checkbox'" style="font-size: 40rpx;" size="40"></uni-icons>
				</view>
				<view class="head" style="font-weight: 500;">
					{{item.name}}
				</view>
				<view class="head">
					<view class="user_name" style="margin-right: 10rpx;">{{item.real_name}}</view>
					<view class="user_phone">{{item.mobile}}</view>
				</view>
				<image class="edit-icon" src="https://qiniu-cdn.maeiyun.com/imgs/mine/edit.png" mode=""
					@click.stop="editAddress(index)"></image>
			</label>
			<view class="" v-if="data.length<1">
				<blankPage :img="'https://qiniu-cdn.maeiyun.com/imgs/index/no-list.png'" :width="164" :height="134"></blankPage>
			</view>
		</scroll-view>
		<view class="add_btn" v-show="iscut" @click="affrimPeople">确定选择</view>
		
		<!-- </mescroll-uni> -->
		<scroll-view class="modal" style="height: 80%;" scroll-y v-show="modalName == 'add' && !iscut">
			<view class="card">
				<!-- <view class="cuIcon-close" @click="closeModal"></view> -->
				<view class="ad_line">
					<view class="line_l">姓名</view>
					<view class="inp_box">
						<input type="text"  v-model="form.name" placeholder="必填,联系人" class="inp"
							placeholder-style="color:#ccc;" />
					</view>
				</view>
				<view class="ad_line">
					<view class="line_l">证件类型</view>
					<view class="inp_box">
						<picker @change="bindPickerChange" range-key="type" :value="index" :range="array">
							<view class="uni-input">{{array[index].type}}</view>
						</picker>
					</view>
				</view>
				<view class="ad_line">
					<view class="line_l">证件号</view>
					<view class="inp_box">
						<input type="idcard" v-model="form.cardNo" placeholder="必填,证件号" class="inp"
							placeholder-style="color:#ccc;" />
					</view>
				</view>
				<view class="ad_line">
					<view class="line_l">联系手机</view>
					<view class="inp_box">
						<input type="tel" v-model="form.mobile" placeholder="必填,联系电话" class="inp"
							placeholder-style="color:#ccc;" />
					</view>
				</view>
				<view class="submit" @click="saveAddress()">保存</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		name: "addTourist",
		mixins:[MescrollMixin],
		props:{
			nums:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				modalName: null,
				// 滚动数据初始化
				visible_height: 60,
				solt_height: 0,
				page: 1,
				hasMore: true,
				data: [],
				data_number: 0,
				// 初始化表单数据
				form: {
					id: 0,
					real_name: '',
					idcard: "",
					cardType:"",
					mobile: '',
				},

				disabled: false,
				choice: 0,
				back: 0,
				iscut: true,
				array: [
					{'type':'身份证',"id":'1'},
					{'type':'护照',"id":'2'},
					{'type':'台湾通行证',"id":'6'},
					{'type':'港澳通行证',"id":'5'},
					{'type':'外国人永久居留身份证',"id":'8'},
					{'type':'港澳台居民居住证',"id":'9'},
				],
				index: 0,
				indexList:[],
				checkPeople:[],
				down: {
					auto: false
				}
			}
		},
		mounted(options) {
			this.loadList()
			this.form.cardType = this.array[0].id
		},
		methods: {
			cutFn(type){
				if(type == 0){
					this.iscut = true
					this.data = []
					this.page = 1
					this.loadList()
				}else{
					this.modalName = "add"
					this.iscut = false
				}
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.form.cardType = this.array[e.detail.value].id
			},
			
			choiceAddress(item) {
				this.$emit('addressResult', item)
			},
			//初始化信息
			initData() {
				this.disabled = false
				this.form = {
					id: 0,
					name: '',
					mobile: "",
					cardType: 1,
					cardNo: "",
					is_default: 2,
				}
			},
			downCallback(){
				this.data = []
				this.mescroll.resetUpScroll()
			},
			loadList(page){
				var that = this
				let opts = {
					url: "user_guest/index",
					method: 'get'
				};
				let param = {
					page: this.page,
				};
				this.request.httpTokenRequest(opts, param).then(res => {
					res.data.data.map(item=>{
						item.checked = false
						this.data.push(item)
					})
					this.page++
				})
			},
			initScrollData() {
				this.page = 0
				this.hasMore = true
				this.data = []
				this.data_number = 0
			},
			choosePeople(item){
				var that = this
				if(item.checked){
					item.checked = false
					this.checkPeople.find(function(value, index, arr) {
						if(item.id == value.id){
							that.checkPeople.splice(index,1)
						}
					})
				}else{
					if(this.checkPeople.length>= this.nums){
						this.$util.msg("请先增加游客数量")
						return;
					}
					item.checked = true
					that.checkPeople.push(item)
				}
			},
			// loadData(type, callback) {
			// 	uni.showLoading({
			// 		title: "加载中"
			// 	})
				
			// 		this.data_number = this.data.length
			// 		// 隐藏加载条 重置下拉 上拉状态
			// 		uni.hideLoading()
			// 		if (type) callback(false)
			// 	}, error => {

			// 	})
			// },

			showModal(e) {
				this.modalName = e;
			},

			closeModal() {
				this.modalName = null
				this.initData()
				this.$emit('closeaddPage')
			},
			checkboxChange(data) {
				
			},
			affrimPeople(){
				this.$emit('peoples',this.checkPeople)
			},
			//保存地址
			saveAddress() {
				if (this.disabled)
					return

				if (!this.form.name || this.form.name.length<2){
					return uni.showToast({
						title: "姓名格式不正确",
						icon: "none",
					})
				}
					

				let mobile = this.form.mobile;
				if (mobile == "" || (mobile.length != 11) || /^1[3456789]\d{9}$/.test(mobile) == false) {
					uni.showToast({
						title: '请输入正确的手机号码！',
						icon: 'none'
					})
					return 
				}

				if (!this.$util.idcardVerify(this.form.cardNo)){
					uni.showToast({
						title: '请输入正确证件号码！',
						icon: "none"
					});
					return 
				}
				let opts = {
					url: 'user_guest/save',
					method: 'post'
				};

				uni.showLoading({
					title: "游客保存中",
					icon: "none"
				})
				this.disabled = true

				this.request.httpTokenRequest(opts, this.form).then(res => {

					uni.hideLoading()
					if (res.code == 0) {
						//关闭模态框，清除信息
						this.closeModal()
						this.initData()
						this.initScrollData()
						this.downCallback()
					}
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}, error => {

				})

			},
			//编辑地址
			editAddress(index) {
				this.iscut = false
				this.form = Object.assign({}, this.data[index])
				this.showModal('add')
			},

			//删除地址
			deleteAddress(index) {
				let opts = {
					url: "user_address/address_delete",
					method: 'get'
				};

				let param = {
					id: this.data[index].id,
				};
				this.request.httpTokenRequest(opts, param).then(res => {
					if (res.data.code == 1) {
						this.data.splice(this.operation_index, 1)
						if (this.data.length < 5) {
							this.initScrollData()
							this.downCallback()
						}
					}
				}, error => {

				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.address {
		height: 60vh;
		background: $roc-color-f5;
		padding-top: 26rpx;
		.cuIcon-close {
			position: absolute;
			z-index: 92;
			top: 20rpx;
			right: 20rpx;
			font-size: 32rpx;
			color: #000;
		}
		.address-title {
			width: 321rpx;
			height: 50rpx;
			background: #EBEBEB;
			border-radius: 29rpx;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin: 26rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.select-address {
				width: 155rpx;
				height: 42rpx;
				background: #EF5233;
				border-radius: 29rpx;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 42rpx;
			}
		
			.item-address {
				width: 155rpx;
				height: 42rpx;
				text-align: center;
				line-height: 42rpx;
			}
		
		}
	}
	
	.address-list {
		background-color: $roc-color-f5;
		padding: 0 $roc-primary-padding-lr;
	}

	.check_box {
		width: 36rpx;
		height: 36rpx;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid $roc-color-ccc;
		margin-right: 10rpx;
		overflow: hidden;

		.icon-duigou {
			font-size: 20rpx;
			line-height: 1;
			color: #fff;
		}
	}

	.checked {
		background-color: $roc-color-233;
		border: 1px solid $roc-color-233;
	}

	.default {
		font-size: 26rpx;
		color: #000;
	}

	.ad_card {
		width: 100%;
		padding: 16upx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 10px;
		position: relative;
		display: flex;
		align-items: center;

		.edit-icon {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 31rpx;
			// top: 64rpx;
		}
		.head {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			padding: 12rpx 0;
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #151616;
		}

		.ad {
			display: flex;
			align-items: center;
			padding: 12rpx 0;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #151616;

			.ad_icon {
				color: $roc-color-233;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.ad_txt {
				flex: 1;
				width: 0;
				font-size: 26rpx;
				color: #666;
			}
		}

		.menu {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.menu_l {
				display: flex;
				align-items: center;
				line-height: 1;

			}

			.menu_r {
				display: flex;
				align-items: center;

				.menu_cell {
					display: flex;
					align-items: center;
					line-height: 1;
					margin-left: 30rpx;
					color: #999;
					font-size: 24rpx;

					.iconfont {
						color: $roc-color-233;
						margin-right: 3px;
					}

					.icon-bianji {
						font-size: 40rpx;
					}
				}
			}
		}
	}

	.add_btn {
		position: fixed;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		height: 40px;
		border-radius: 20rpx;
		background-color: $roc-color-233;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 1px;
		font-size: 30rpx;
		font-weight: 700;
	}

	.modal {
		padding: 30rpx;
		overflow-y: scroll;
		.card {
			width: 100%;
			padding: 30rpx $roc-primary-padding-lr;
			border-radius: 30rpx 30rpx 0 0;
			background-color: #fff;

			

			.ad_line {
				height: 56px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid $roc-color-f7;

				.line_l {
					width: 140rpx;
					font-size: 30rpx;
					color: #000;
					flex-shrink: 0;
				}

				.inp_box {
					display: flex;
					align-items: center;
					flex: 1;
					height: 52px;

					.inp {
						flex: 1;
						color: #000;
						font-size: 28rpx;
						line-height: 1;
					}

					.choice-icon {
						flex-shrink: 0;
						height: 52px;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 20rpx;
					}
				}

				.line_r {
					display: flex;
					align-items: center;
					width: 100%;
					justify-content: space-between;

					.icon-dingwei {
						flex-shrink: 0;
						margin-left: 16rpx;
						font-size: 36rpx;
						color: $roc-color-light-yellow;
					}

					.location {
						flex: 1;
					}

					.ccc {
						color: #ccc;
					}
				}
			}

			.pos {
				align-items: flex-start;
			}

			.submit {
				width: 100%;
				height: 40px;
				border-radius: 30rpx;
				background-color: $roc-color-233;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 1px;
				margin-top: 30px;
			}
		}
	}
</style>